<template>
  <div style="width: 100%;" class="commonEntityDialog">
    <div class="dialogTitle">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" :name="1" disabled></el-tab-pane>
        <el-tab-pane label="接口" :name="2" disabled></el-tab-pane>
        <el-tab-pane label="属性" :name="3" disabled></el-tab-pane>
        <el-tab-pane label="功能配置" :name="4" disabled></el-tab-pane>
        <el-tab-pane label="关系" :name="5" disabled></el-tab-pane>
      </el-tabs>
    </div>
    <div style="width: 100%">
      <base-info :show="activeName===1"

                 :ROW="ROW"
                 :formDataAll="formDataAll"
                 :dialogType="dialogType"
                 :disabled="dialogType==='view'"
                 ref="step1">
      </base-info>
      <interface :show="activeName===2"

                 :formDataAll="formDataAll"
                 :dialogType="dialogType"
                 :disabled="dialogType==='view'"
                 ref="step2">
      </interface>
      <properties :show="activeName===3"

                  :formDataAll="formDataAll"
                  :dialogType="dialogType"
                  :disabled="dialogType==='view'"
                  ref="step3">
      </properties>
      <function :show="activeName===4"

                :formDataAll="formDataAll"
                :dialogType="dialogType"
                :disabled="dialogType==='view'"
                ref="step4">
      </function>
      <relation :show="activeName===5"

                :formDataAll="formDataAll"
                :dialogType="dialogType"
                :disabled="dialogType==='view'"
                ref="step5"></relation>
    </div>

    <div class="md-component-btns">
      <el-button size="medium" type="primary" v-if="dialogType!=='view'?[1,5].includes(activeName):false"
                 @click="save">保存
      </el-button>
      <el-button size="medium" v-if="activeName!==1" @click="changeStep(-1)">上一步</el-button>
      <el-button size="medium" v-if="activeName!==5" :disabled="dialogType==='add'" @click="changeStep(+1)">
        下一步
      </el-button>
      <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
    </div>
  </div>
</template>

<script>
import BaseInfo from "@/views/Model_Relation/entityTemp/baseInfo.vue";
import Interface from "@/views/Model_Relation/entityTemp/Interface.vue";
import Properties from "@/views/Model_Relation/entityTemp/Properties.vue";
import Relation from "@/views/Model_Relation/entityTemp/Relation.vue";
import Function from "@/views/Model_Relation/entityTemp/Function.vue";

import * as entity from "@/api/modulManage/entity"
import * as relation from "@/api/modulManage/relation"

export default {
  name: "modelRelationTemp",
  components: {Function, Relation, Properties, Interface, BaseInfo},
  inject: ["temp"],
  props: {
    showThisTabs: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
  },
  data() {
    return {
      visible: false,
      activeName: 0,

      dialogType: "add",
      formDataAll: {
        nameCn: "",
        name: "",
        parentName: "",
        nameEn: "",
        type: "",
        refType: "",
        describeEn: "",
        describeCn: "",
        icon: "",
        tableName: "",
        toOid: "",
        isTree: 0,
        isGanged: 1,
        fromOid: "",
        abstractFlag: 0,
        whetherFastExtend: 0,
        whetherFinal: 0,
        fromTypeNameList: [],
        toTypeNameList: [],
        labelIdList: [],
        whetherStoredToParent: 0,
        functionInterfaceList: [],//功能列表
        businessInterfaceList: [],//接口
        extendAttributeList: [],//属性

        typeFunctionSettingList: [],//功能配置

        extendsData: [],//继承的功能
        extendsAttributeData: [],//继承的属性
        referenceWhetherSort:0,
        referenceSortJson:""
      },

      api: [entity, relation],

      ROW: {},
    }
  },
  methods: {
    save() {
      this.$refs.step1.save().then((tableNamePrefix) => {
        this.saveError = false;
        let form = this.deepCopy(this.formDataAll);
        let methods = this.activeName !== 1 ? "update" : (this.dialogType !== "add" ? "update" : "add");
        if (this.dialogType === "add") {
          form.name = tableNamePrefix + form.name;
        }
        this.api[this.temp - 1][methods](form).then((r) => {
          this.api[this.temp - 1].getDetail({oid: r.data.data}).then(res => {
            if (this.dialogType === "add") {
              this.ROW = res.data.data;
              this.ROW.state = 0;
            }
            Object.assign(this.formDataAll, res.data.data);
            this.dialogType = "edit";
          })
          this.$message.success("保存成功")
          this.$emit("refresh")
          if (this.activeName === 5) {
            this.$emit('removeThisTabs');
          }
        })
      }).catch(() => {
        this.activeName = 1;
      })
    },
    changeStep(v) {
      if (this.activeName === 4 && v === 1) {
        let {state, msg} = this.$refs["step4"].validate()
        if (!state) {
          return this.$message.warning(`请选择${msg.join(",")}`)
        }
      }
      this.activeName += v;
    },
    open() {
      this.dialogType = "add";
      this.activeName = 1;
    },
    view(row) {
      this.ROW = row;
      this.dialogType = "view";
      this.activeName = 1;
      this.api[this.temp - 1].getDetail({oid: row.oid}).then(res => {
        this.formDataAll = res.data.data;
      })
    },
    edit(row) {
      this.ROW = row;
      this.dialogType = "edit";
      this.activeName = 1;
      const {btn} = row;
      let method = btn === "jc" ? "checkout" : "revise";
      this.api[this.temp - 1][method]({id: row.oid}).then((res) => {
        this.formDataAll = res.data.data;
        this.$emit("refresh")
      })
    },

  }
}
</script>

<style lang="scss">

.dialogTitle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;

  > span {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .el-tabs {
    .el-tabs__header {
      margin: 0;

      .el-tabs__nav-wrap::after {
        height: 0;
      }

      .el-tabs__nav-wrap {
        .el-tabs__nav-scroll {
          .el-tabs__nav {
            .is-disabled {
              color: #303133;
            }

            .is-active {
              color: #409EFF !important;
            }
          }
        }
      }
    }
  }
}
</style>
